<script setup lang="ts">
import { Message } from "@arco-design/web-vue";
import {
  type ColProps,
  TableRowSelection,
  TableColumn,
} from "@arco-design/web-vue";
import { onMounted, reactive, ref, computed } from "vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { expertListApi, expertDeleteApi } from "@/services/expertGroup";
import type {
  ExpertGroupListType,
  ExpertGroupUpdateType,
} from "@/types/expertGroup";
import ExpertGropForm from "./expertGropForm.vue";
import useModal from "@/hooks/useModal.ts";
import { getBaseURL, downloadFile } from "@/utils";
import ExpertGroupModal from "@/pages/review/expertGroup/expertGroupModal.vue";
import type {ReviewModuleListModuleItemType} from "@/types/reviewModuleType.ts";
import {reviewModuleListModule} from "@/services/reviewModuleApi.ts";
const { ModalShow, ModalHide } = useModal();

const colProps: ColProps = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 7,
  xl: 7,
  xxl: 7,
  span: 7,
};

const rowSelection: TableRowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
};

const loading = reactive({
  search: false, // 查询按钮的 Loading
  reset: false, // 重置按钮的 Loading
  import: false, // 导入按钮的 Loading
  export: false, // 导出按钮的 Loading
  downloadTemplate: false, // 裁判模板下载按钮的 Loading
  print: false, // 打印按钮的 Loading
  batchDelete: false, // 批量删除的 Loading
  deleteAll: false, // 全部删除的 Loading
  table: false,
  edit: false,
  delete: false,
});

const selectedKeys = ref<string[]>([]);

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
});

const moduleList = ref<ReviewModuleListModuleItemType[]>([])

const moduleId = ref<string>("")

const centerContent = ref<{
  show: () => void;
  edit: (data: ExpertGroupUpdateType) => void;
}>();

const modalRef = ref<{
  show: () => void;
  edit: (data: string, name: string, ids: string[]) => void;
}>()

const data = ref<ExpertGroupListType>([]);
const searchValue = reactive({
  name: "",
});

const options = reactive({
  title: "",
});


// 查询
const handleSearch = () => {
  pagination.current = 1;
  selectedKeys.value = [];
  getList();
};
// 重置
const handleReset = () => {
  searchValue.name = "";
  handleSearch();
};
// 添加
const handleAdd = () => {
  options.title = "添加专家组";
  modalRef.value?.show();

};

// 分页
const handlePageChange = (page: number) => {
  pagination.current = page;
  getList();
};
// 编辑
const handleEdit = (res: ExpertGroupListType) => {
  options.title = "编辑专家组";
  console.log(res)
  // console.log(res)
  modalRef.value?.edit(res.groupId, res.groupName, res.teacherIds.split(','));
};

// 删除
const handleDelete = (res: ExpertGroupListType) => {
  ModalShow({
    content: "您确认要删除这条专家组信息吗？",
  })
    .then(() => {
      expertDeleteApi({
        id: res.groupId,
      }).then((res) => {
        if (res.code === 200) {
          if (data.value.length === 1) {
            pagination.current = pagination.current - 1;
          }
          getList();
          ModalHide();
          Message.success("删除成功");
        } else {
          ModalHide();
        }
      });
    })
    .finally(() => {
      loading.delete = false;
    });
};


const getList = () => {
  expertListApi({
    current: pagination.current,
    size: pagination.pageSize,
    name: searchValue.name,
    moduleId: moduleId.value
  }).then((res) => {
    data.value = res.data.records;
    pagination.total = res.data.total;
    pagination.current = res.data.current;
    pagination.pageSize = res.data.size;
  });
};


const columns: TableColumn[] = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    slotName: "index",
    align: "center",
  },
  {
    title: "专家组名称",
    key: "groupName",
    dataIndex: "groupName",
    align: "center",
  },
  {
    title: "专家",
    key: "teacherNames",
    dataIndex: "teacherNames",
    align: "center",
  },
  {
    title: "操作",
    slotName: "operate",
    align: "center",
    width: 160,
    fixed: "right",
  },
];

onMounted(() => {
  reviewModuleListModule().then((res) => {
    moduleList.value = res.data
    moduleId.value = res.data[0].id
  }).finally(getList)
  // getList();
});

const handleTabChange = () => {
  pagination.current = 1
  getList()
}
</script>

<template>
  <a-space
    class="container"
    direction="vertical"
  >
    <a-card>
      <a-tabs v-model:active-key="moduleId" @change="handleTabChange" type="card">
        <a-tab-pane v-for="item in moduleList" :key="item.id" :title="item.moduleName">
          <a-form auto-label-width>
            <a-row :gutter="24">
              <a-col v-bind="colProps">
                <a-form-item
                    label="专家组名称"
                    :label-col-props="{ span: 5 }"
                >
                  <a-input
                      allow-clear
                      v-model="searchValue.name"
                      placeholder="请输入专家组名称"
                  />
                </a-form-item>
              </a-col>
              <a-col v-bind="colProps">
                <a-form-item :label-col-props="{span: 0}">
                  <a-space>
                    <a-button
                        type="primary"
                        @click="handleSearch"
                        :loading="loading.search"
                    >
                      <template #icon>
                        <icon-search />
                      </template>
                      <span>查询</span>
                    </a-button>
                    <a-button
                        @click="handleReset"
                        :loading="loading.reset"
                    >
                      <template #icon>
                        <icon-refresh />
                      </template>
                      <span>重置</span>
                    </a-button>
                    <a-button
                        type="outline"
                        @click="handleAdd"
                    >新增</a-button>
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <a-table
              :loading="loading.table"
              :data="data"
              :columns="columns"
              :bordered="tableBorder"
              :pagination="pagination"
              @page-change="handlePageChange"
          >
            <template #index="{rowIndex}">
              {{ (pagination.current - 1) * pagination.pageSize + rowIndex + 1 }}
            </template>

            <template #operate="{ record }">
              <a-space>
                <a-button
                    type="primary"
                    @click="handleEdit(record)"
                    :loading="loading.edit"
                >编辑</a-button>
                <a-button
                    type="primary"
                    status="danger"
                    @click="handleDelete(record)"
                    :loading="loading.delete"
                >删除</a-button>
              </a-space>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>

    </a-card>
  </a-space>

  <expert-group-modal :moduleId="moduleId" ref="modalRef" @list="getList"/>

  <expert-grop-form
    ref="centerContent"
    @list="getList"
    :title="options.title"
  />
</template>

<style scoped lang="scss">
:deep(.arco-tabs-pane) {
  box-sizing: border-box;
  padding: 10px !important;
}
</style>